<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-11 13:48:19
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab">
      <div class="stats-btn-group"></div>
      <el-button
        class="business-export-btn"
        type="primary"
        @click="handlerExportClick"
        :loading="exportLoading"
      >
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <bar-chart
      :chart-data="chartData"
      v-loading="loading"
      :is-loading="loading"
    ></bar-chart>
  </div>
</template>
<script>
import BarChart from "./BarChart.vue";
export default {
  name: "work-hours-chart",
  components: {
    [BarChart.name]: BarChart,
  },
  props: {
    exportLoading: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chartType: "plan-a",
      chartData: {},
    };
  },
  created() {},
  methods: {
    handlerExportClick() {
      this.$emit("export");
    },
    init(data, haveUsers) {
      this.getChartData(data, haveUsers);
    },
    getTooltips(data, index, seriesIndex) {
      if (this.chartType == "plan-a") {
        return `
          <div class="tooltipTitle">${
            data[index].workHoursDataVOs[seriesIndex].tagName || this.$t('report.common.noDept')
          }</div>
          <div class="tooltipDetail">${this.$t('report.workHoursChart.outputRate')}：${
            data[index].workHoursDataVOs[seriesIndex].outputPower
          }%</div>
        `;
      }
      return "";
    },
    getChartData(data, haveUsers) {
      if (!data) data = [];
      if (this.chartType == "plan-a") {
        let that = this;
        let originData = data[0] ? data[0].workHoursDataVOs : [];
        let series = [];
        // if(haveUsers){
        //   series = (originData || []).map(item=>{
        //     return {type:'bar', name:item.customerName,
        //       label: {
        //         show: true, // 开启显示
        //         position: 'top', // 在上方显示
        //         textStyle: { // 数值样式
        //           color: 'black',
        //           fontSize: 16
        //         }
        //       }
        //     }
        //   })
        // }else{
        //   let example = {type:'bar',
        //     label: {
        //       show: true, // 开启显示
        //       position: 'top', // 在上方显示
        //       textStyle: { // 数值样式
        //         color: 'black',
        //         fontSize: 16
        //       }}
        //   }
        //   series = [example, example, example]
        // }
        series = (originData || []).map((item) => {
          return {
            type: "bar",
            name: item.tagName,
            label: {
              show: true, // 开启显示
              position: "top", // 在上方显示
              color: "auto",
              fontSize: 16,
              formatter: (params) => {
                const { value, seriesIndex } = params;
                return `${value[seriesIndex + 1]}%`;
              },
            },
          };
        });
        let dataSource = [];
        data.forEach((item) => {
          let oneData = [item.date];
          series.forEach((element, index) => {
            oneData.push(
              item.workHoursDataVOs[index]
                ? item.workHoursDataVOs[index].outputPower * 1
                : 0
            );
          });
          dataSource.push(oneData);
        });
        if (dataSource.length == 0) {
          return (this.chartData = {});
        }
        this.chartData = {
          legend: {
            show: true,
            type: "scroll",
          },
          tooltip: {
            triggerOn: "mousemove",
            enterable: true,
            formatter: (params) => {
              return that.getTooltips(data, params.dataIndex, params.seriesIndex);
            },
          },
          dataset: {
            source: dataSource,
          },
          xAxis: { type: "category" },
          yAxis: {
            max: 100,
            min: 0,
            axisLabel: {
              formatter: "{value}%",
            },
          },
          series,
          dataZoom: [
            data.length * series.length > 30
              ? {
                  type: "slider",
                  show: true,
                  start: 1, // 数据窗口范围的起始百分比,表示1%
                  end: 50,
                  xAxisIndex: 0,
                  bottom: "10px",
                }
              : {
                  type: "slider",
                  show: false,
                  start: 1, // 数据窗口范围的起始百分比,表示1%
                  end: 100,
                  xAxisIndex: 0,
                  bottom: "10px",
                },
          ],
        };
      }

      // 这里处理饼状图数据
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../business.scss";
.tooltipTitle {
  color: $color-primary-light-6;
  font-size: 14px;
}
.tooltipDetail {
  color: orange;
  font-size: 12px;
}
</style>
<style lang="scss">
.business-chart {
  .tooltipTitle {
    color: $color-primary-light-6;
    font-size: 14px;
  }
  .tooltipDetail {
    color: orange;
    font-size: 12px;
  }
}
</style>
